<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		.nav-tabs {
			margin-top: 10px;
		    border-bottom: 0px;
		}
		.nav-tabs li a {
		    border: none;
		    padding: 3px 10px;
		}
		.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
		    color: #555;
		    cursor: default;
		    background-color: #fff;
		    border-color: transparent;
		}
		.nav-tabs>li.active>a span.vein_icon1, .nav-tabs>li.active>a span.vein_icon1:focus, .nav-tabs>li.active>a span.vein_icon1:hover {
			background: url(../../img/myExtension/vein_icon1_pressed.png) no-repeat;
			width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li.active>a span.vein_icon2, .nav-tabs>li.active>a span.vein_icon2:focus, .nav-tabs>li.active>a span.vein_icon2:hover {
			background: url(../../img/myExtension/vein_icon2_pressed.png) no-repeat;
			width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li.active>a span.vein_icon3, .nav-tabs>li.active>a span.vein_icon3:focus, .nav-tabs>li.active>a span.vein_icon3:hover {
			background: url(../../img/myExtension/vein_icon3_pressed.png) no-repeat;
			width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li span.vein_icon1{
			display: inline-block;
            background: url(../../img/myExtension/vein_icon1_norm.png) no-repeat;
            width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li span.vein_icon1.active{
            background: url(../../img/myExtension/vein_icon1_pressed.png) no-repeat;
		}
		.nav-tabs>li span.vein_icon2{
			display: inline-block;
            background: url(../../img/myExtension/vein_icon2_norm.png) no-repeat;
            width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li span.vein_icon3{
			display: inline-block;
            background: url(../../img/myExtension/vein_icon3_norm.png) no-repeat;
            width: 20px;
            height: 20px;
            background-size: cover;
		}
		.tab-chart-pane {
			margin-bottom: 30px;
		}
		.tab-chart-content>.tab-chart-pane {
		    display: none;
		}
		.tab-chart-content>.active {
		    display: block;
		}
		/*结束*/
		.list-li {
			margin-top: 10px;
			padding: 10px 20px;
			background-color: #11b5ab;
			border-radius: 10px;
		}
		.media-body {
			vertical-align: middle;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="btn-group btn-group-justified btn-tab" role="group" aria-label="button-group">
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel1" class="btn btn-default active">发展足迹</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel2" class="btn btn-default">客户详情</button>
			</div>
		</div>
		<div class="tab-content">
			<div id="tab-panel1" class="tab-pane active">
				<ul id="myTab" class="nav nav-tabs" role="tablist">
					<li class="active" panel-data="tab-li2"><a href="#rule"  title="结构图" role="tab" data-toggle="tab"><span class="vein_icon2"></span></a></li>
				    <li panel-data="tab-li1"><a href="#bulletin" title="列表图" role="tab" data-toggle="tab"><span class="vein_icon1"></span></a></li>
				</ul>
				<!-- 选项卡面板 -->
				<div id="myTabContent" class="tab-chart-content">
					<div class="tab-chart-pane active" id="rule">
				    		<iframe src="" width="100%" height="680px" frameborder="0" scrolling="no"></iframe>
				    </div>
				    <div class="tab-chart-pane" id="bulletin">
				    		<div id="uiwm-threadview" style=" height:680px;"></div>
				    </div>
				</div>
			</div>
			<div id="tab-panel2" class="tab-pane">
				<ul class="list-ul">
					<!--<li class="list-li">
					    <div class="media-left">
					      	<a href="#">
					        	<img class="border-radius-40" class="media-object" src="../../img/headimg.jpg" alt="用户头像">
					      	</a>
					    </div>
					    <div class="media-body">
					    	<span style="margin-right: 20px;">刘刚</span><span style="margin-right: 20px;">男</span><span>贵州贵阳</span>
					    </div>
					</li>-->
				</ul>
				<nav id="page" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
		</div>	
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../../js/utils/template.js" ></script>
	<script type="text/javascript" src="../../js/utils/echarts.min.js" ></script>
	<script>
		var userID,companyID,articleID,relationType,articleUserID,pageNo=1;
		var worldMapContainer = document.getElementById('uiwm-threadview');
		//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
	    var resizeWorldMapContainer = function () {
	        worldMapContainer.style.width = window.innerWidth + 'px';
	        worldMapContainer.style.height = window.innerHeight + 'px';
	    };
	    //设置容器高宽
	    resizeWorldMapContainer();
	    var myChart = echarts.init(worldMapContainer);
		myChart.showLoading();
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			articleID = base.getParameter("articleID");
			relationType = base.getParameter("relationType");
			articleUserID = base.getParameter("articleUserID");
			if (articleUserID != null && articleUserID != "") {
				userID = articleUserID;
			}
			$("#rule").find("iframe").attr("src", "connChartIframe.html?articleID="+articleID+"&relationType="+relationType+"&articleUserID="+articleUserID);
			//获取脉络图信息
			base.postData(base.url.relationMap, {userID:userID,companyID:companyID,articleID:articleID,relationType:relationType}, callbackRelationMap);
		});
		function callbackRelationMap(data) {
			if (data.success) {
				var graph = data.context.dataPacket;
				myChart.hideLoading();
			    var categories = [];
			    var max = 0;
			    graph.nodes.forEach(function (node) {
			        node.itemStyle = null;
			        node.symbolSize = node.size;
			        node.value = node.symbolSize;
			        node.category = node.category;
			        // Use random x, y
			        node.x = node.y = null;
			        node.draggable = true;
			        if(node.category>max){
	                    max = node.category;
	                }
			    });
			    for (var i = 0; i <= max; i++) {
	                categories[i] = {
	                    name: '层级' + i
	                };
	            }
			    
			    option = {
			    	color: ['#000033','#6991e9','#fff33f','#de4e93','#24ddcf','#ff9611','#19d535','#d7003f','#1774ff','#8236f','#0090e6','#ccff0','#9578ff','#18ce7f'],
			        title: {
			            text: '脉络图',
			            subtext: 'Default layout',
			            top: 'bottom',
			            left: 'center'
			        },
			        tooltip: {
			        	formatter: function (params) {
	                    if (params.dataType === 'node') {
	                      var colorEl = '<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:' + params.color + '"></span>';
	                      return colorEl + params.name;
	                    }
	                  }
			        },
			        legend: [{
			            // selectedMode: 'single',
			            data: categories.map(function (a) {
			                return a.name;
			            })
			        }],
			        animation: false,
			        series : [
			            {
			                name: '未来脉络',
			                type: 'graph',
			                layout: 'force',
			                data: graph.nodes,
			                links: graph.links,
			                legendHoverLink: true,
	                        focusNodeAdjacency: true,
			                categories: categories,
			                roam: true,
			                label: {
			                    normal: {
			                        position: 'right'
			                    }
			                },
			                force: {
			                    repulsion: 200
			                },
			                lineStyle: {
		                        normal: {
		                            color: 'source',
		                            curveness: 0.3
		                        }
		                    }
			            }
			        ]
			    };
			    myChart.setOption(option);
			    myChart.on('click', function (params) {
				    var _customerID = params.data.id;
					window.parent.location = "../index.html?path=myClient/clientDetailsPhone.html?customerID="+_customerID+"&articleID="+articleID;
				});
			}
		}
//		$("#myTab").on("click", "li", function(){
//			var panelId = $(this).attr("panel-data");
//			if (panelId == "tab-li2") {
//				$("#rule").find("iframe").attr("src", "connChartIframe.html?articleID="+articleID+"&relationType="+relationType+"&articleUserID="+articleUserID);
////				$("#rule").append('<iframe width="100%" height="680px" frameborder="0" scrolling="no" src="connChartIframe.html?articleID='+articleID+'"></iframe>');
//			}
//		});
		$(".btn-tab").on("click", "button", function(){
			$(".btn-tab button").removeClass("active");
			$(this).addClass("active");
			var panelId = $(this).attr("panel-data");
			$(".tab-content .tab-pane").removeClass("active");
			$("#"+panelId).addClass("active");
			if (panelId == "tab-panel2") {//客户详情
				initGetCustomerImpact();
			}
		});
		//获取客户影响力
		function initGetCustomerImpact() {
			var data = {
				userID:userID,
				companyID:companyID,
				articleID:articleID,
				pageNo:pageNo
			}
			base.postData(base.url.getCustomerImpact,data, callbackGetCustomerImpact);
		}
		function callbackGetCustomerImpact(data) {
			if (data.success) {
				var html = "";
				for (var i=0; i < data.context.clientImpactList.length; i++) {
					html += pingCustomerImpact(data.context.clientImpactList[i]);
				}
				$("#tab-panel2 .list-ul").html(html);
				if (pageNo == 1) {
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/8);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage,//总页数
						onPageClick: function(page) {
							$("#page").initPage(page);
							pageNo = page.currentPage;
							initGetCustomerImpact();
			    			return false;  //默认的翻页事件
					    }
					};
					$("#page").initPage(page);
				}
			}
		}
		function pingCustomerImpact(data) {
			var sex = "未知";
			if (data.sex == 1) {
				sex = "男";
			}else if (data.sex == 2) {
				sex = "女";
			}
			var html = '<li class="list-li">'+
						'	<input type="hidden" name="customerID" value="'+data.customerID+'" />'+
						'    <div class="media-left">'+
						'      	<a href="#">'+
						'        	<img class="border-radius-40" class="media-object" src="'+data.headImgUrl+'" alt="用户头像">'+
						'      	</a>'+
						'    </div>'+
						'    <div class="media-body">'+
						'    	<span style="margin-right: 20px;">'+data.nickName+'</span><span style="margin-right: 20px;">'+sex+'</span><span>'+data.area+'</span>'+
						'    </div>'+
						'</li>';
			return html;			
		}
		$("#tab-panel2 .list-ul").on("click", ".list-li", function(){
			var customerID = $(this).find("input[name='customerID']").val();
			window.parent.location = "../index.html?path=myClient/clientDetailsPhone.html?customerID="+customerID+"&articleID="+articleID;
		});
	</script>	
</body>
</html>
